<template>
	<div>
		<div class="box">
			<!-- <div class="title">合同</div> -->
			<!-- <AForm -->
			<!-- ref="form1" -->
			<!-- v-model="obj" -->
			<!-- :config="radioList" -->
			<!-- :state="state"></AForm> -->
			<div class="contracBox">
				<AForm
					ref="form2"
					v-model="formData"
					:config="formList"
					:state="state">
					<template #ccc="scope">
						<el-button
							v-if="notEmpty(scope.row.contractTemplateId)"
							class="preview"
							type="text"
							@click="preview(scope.row)">
							查看
						</el-button>
					</template>
				</AForm>
				<el-button
					v-if="showHistory"
					class="orderChangeHistory"
					type="primary"
					@click="toOrderChangeHistory">
					查看变更历史记录
				</el-button>
			</div>

			<!-- 出租方 -->
			<keep-alive>
				<Lessor
					ref="Lessor"
					v-if="formData.changeType == '1'"
					v-model="formData"
					v-bind="querys"
					:deptList="deptList"></Lessor>
			</keep-alive>

			<!-- 承租方 -->
			<keep-alive>
				<Leasee
					ref="Leasee"
					v-if="formData.changeType == '2'"
					v-model="formData"
					v-bind="querys"></Leasee>
			</keep-alive>

			<!-- 期限调整 -->
			<keep-alive>
				<Time
					ref="Time"
					v-if="formData.changeType == '3'"
					v-model="formData"
					v-bind="querys"></Time>
			</keep-alive>
			<!-- <!~~ 租金调整 ~~> -->
			<!-- <Rent v-model="formData" v-bind="querys"></Rent> -->
			<!-- <!~~ 维保 ~~> -->
			<!-- <Maintain v-model="formData" v-bind="querys"></Maintain> -->
			<!-- <!~~ 承租方变更申请 ~~> -->
			<!-- <LeaseeApply v-model="formData" v-bind="querys"></LeaseeApply> -->
			<!-- <!~~ 法务部审批 ~~> -->
			<!-- <Law v-model="formData" v-bind="querys"></Law> -->
			<!-- <!~~ 车辆变更申请 ~~> -->
			<!-- <Car v-model="formData" v-bind="querys"></Car> -->
			<!-- <!~~ 替车 ~~> -->
			<!-- <Replace v-model="formData" v-bind="querys"></Replace> -->
			<!-- <!~~ 保险 ~~> -->
			<!-- <Insurance v-model="formData" v-bind="querys"></Insurance> -->
			<!-- <!~~ 加装 ~~> -->
			<!-- <Decoration v-model="formData" v-bind="querys"></Decoration> -->
			<!-- <!~~ 其他 ~~> -->
			<!-- <Other v-model="formData" v-bind="querys"></Other> -->
			<!-- <Footer ref="Footer" v-model="formData"></Footer> -->
			<common-contract-content
				ref="commonContractContent"></common-contract-content>
		</div>
	</div>
</template>

<script>
	import AForm from '@/components/A/A-form/form/index.vue';
	import Leasee from '../adjust/leasee/index.vue';
	import Lessor from '../adjust/lessor/index.vue';
	import Time from '../adjust/time/index.vue';
	import Rent from '../adjust/rent/index.vue';
	import Maintain from '../adjust/maintain/index.vue';
	import LeaseeApply from '../apply/leasee/index.vue';
	import Law from '../apply/law/index.vue';
	import Car from '../apply/car/index.vue';
	import Replace from '@/views/order/mainOrder/chunk/adjust/replace/index.vue';
	import Insurance from '@/views/order/mainOrder/chunk/adjust/insurance/index.vue';
	import Decoration from '@/views/order/mainOrder/chunk/adjust/decoration/index.vue';
	import Other from '@/views/order/mainOrder/chunk/adjust/other/index.vue';
	import Footer from '@/views/order/mainOrder/chunk/adjust/footer/index.vue';
	import * as app from '@/api/app.js';
	import * as apis from '@/api/order/mainOrder/contractChange/api.js';
	import CommonContractContent from '@/views/contractTemplate/components/CommonContractContent.vue';
	export default {
		name: '',
		components: {
			AForm,
			Leasee,
			Lessor,
			Time,
			Rent,
			Maintain,
			LeaseeApply,
			Law,
			Car,
			Replace,
			Insurance,
			Decoration,
			Other,
			Footer,
			CommonContractContent,
		},
		dicts: ['order_change_type'],
		props: {
			value: {
				type: Object,
				default: () => {
					return {};
				},
			},
			state: {
				required: false,
			},
			showHistory: {
				required: false,
				default: true,
			},
		},
		data() {
			return {
				obj: {
					radio: '1',
				},
				deptList: {
					company: [],
				},
				dictList: {
					contractTemplateId: [],
				},
			};
		},
		computed: {
			formData: {
				get() {
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			radioList() {
				return [
					{
						label: '合同模板方案',
						type: 'radioGroup',
						prop: 'radio',
						dict: {
							list: [
								{
									label: '补充协议模板',
									value: '1',
								},
							],
						},
						layout: {
							inline: true,
							block: true,
							fit: true,
						},
						rules: true,
					},
				];
			},
			formList() {
				return [
					// {
					// 	label: '补充协议模板',
					// 	prop: 'contractTemplateId',
					// 	type: 'select',
					// 	dict: {
					// 		list: this.dictList.contractTemplateId,
					// 		label: 'templateName',
					// 		value: 'id',
					// 	},
					// 	layout: {
					// 		inline: true,
					// 		block: true,
					// 	},
					// 	slot: 'ccc',
					// 	rules: true,
					// 	on: {
					// 		change({ val, item, row }) {
					// 			row.contractTemplateCode =
					// 				item.value.templateCode;
					// 			row.contractTemplateName =
					// 				item.value.templateName;
					// 		},
					// 	},
					// },
					{
						label: '变更类型',
						prop: 'changeType',
						type: 'radioGroup',
						dict: {
							list: this.dict.type.order_change_type,
						},
						layout: {
							inline: true,
							block: true,
							fit: true,
						},

						rules: true,
						on: {
							change: ({ val, item, row }) => {
								if (val != 2) {
									this.formData.returnMargin = '2';
								}
							},
						},
					},
				];
			},
			querys() {
				return {
					state: this.state,
				};
			},
		},
		created() {
			this.getDeptList(2);
		},
		mounted() {},
		methods: {
			toOrderChangeHistory() {
				this._toPage({
					name: 'OrderChangeHistory',
					query: Object.assign(this.$attrs, {
						orderChangeId: this.formData.orderChangeId,
						orderId: this.formData.orderId,
					}),
				});
			},
			onload() {
				this.getTemplateList(4);
			},
			preview(row) {
				if (!this.isNull(row.contractTemplateId)) {
					this.$refs.commonContractContent.show(
						row.contractTemplateId,
					);
				} else {
					this.$message.error('模版id为空,无法查看');
				}
			},
			getTemplateList(type) {
				let params = {
					templateClassification: type,
					relatedCustomers: this.formData.leaseeId,
				};
				app.TemplateList(params).then(res => {
					if (res.code == 200) {
						this.dictList.contractTemplateId = res.data;
					}
				});
			},
			getDeptList(deptType) {
				let params = {
					deptType,
				};
				app.DeptListNoPermission(params).then(res => {
					if (res.code == 200) {
						res?.data?.map(item => {
							item.deptId = item.deptId?.toString();
						});
						switch (deptType) {
							case 1:
								this.deptList.department = res?.data ?? [];
								break;
							case 2:
								this.deptList.company = res?.data ?? [];
								break;
						}
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		background-color: #fff;
		margin: 20px;
		padding: 0 20px;
		border-radius: 8px;
		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 16px;
			color: #333333;
			line-height: 22px;
			text-align: left;
			font-style: normal;
			padding: 15px 0;
			border-bottom: 1px solid #e9e9e9;
		}
	}
	.preview {
		margin-left: 10px;
	}
	.contracBox {
		position: relative;
		.orderChangeHistory {
			position: absolute;
			right: 0;
			top: 10px;
		}
	}
</style>
